import PropTypes from 'prop-types'

import {
  CookbookWrap
} from './StyledCookBook'

import Swiper from './Swiper'
import Search from '@/components/search/Search'
import HotCate from './HotCate'
import Top10 from './Top10'

const CookBookUi = ({list}) => {
  return (
    <CookbookWrap>
      <header>菜谱大全</header>
      <Swiper list={list}></Swiper>
      <Search
        bgInnerColor="#fff"
        bgOuterColor="#f5f5f5"
        hasBorder={true}
      ></Search>
      <HotCate></HotCate>
      <Top10 list={list}></Top10>
    </CookbookWrap>
  )
}

CookBookUi.defaultProps = {
  list: []
}

CookBookUi.propTypes = {
  list: PropTypes.array.isRequired
}

export default CookBookUi